﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="" content="*">
    <title>梦洁学院</title>
    <link rel="stylesheet" href="/index/css/reset.css">
    <link rel="stylesheet" href="/index/js/layui-master/src/css/layui.css">
    <style>
        /*login start*/
        #login-wrap{
            width: 360px;
            min-height: 366px;
            padding: 0 20px 20px;
            margin: 0 auto;
        }
        #login-wrap h1{
            font-size: 24px;
            color: #1dddac;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #1dddac;
            text-align: center;
            margin-bottom: 30px;
        }
        #login-wrap div.item{
            width: 320px;
            height: 40px;
            line-height: 40px;
            position: relative;
            border: 1px solid #ccc;
            overflow: hidden;
            padding: 0 8px;
            margin: 20px auto;
            color: #ccc;
        }
        #login-wrap div.item span{
            position: absolute;
            top: 0;
            left: 8px;
            z-index: -1;
        }
        #login-wrap div.item input{
            width: 100%;
            height: 100%;
            vertical-align: top;
            background: none;
        }
        #login-wrap .btn-getCode{
            color: #1dddac;
            text-align: right;
        }
        #login-wrap .btn-getCode.disable{
            color: #ccc;
        }
        #login-wrap  #sub-login{
            height: 50px;
            line-height: 50px;
            background: #1dddac;
            text-align: center;
            color: #fff;
            clear: right;
            margin: 70px auto 10px;
            cursor: pointer;
        }
        .layui-anim-rotate{
            display: inline-block;
            width: 30px;
            height: 50px;
            line-height: 50px;
        }
        #login-wrap #sub-login.disabled{
            background: #333;
        }
    </style>
    <script type="text/javascript" src="/index/js/common.js"></script>
</head>
<body>
<div style="text-align: center; padding-top: 30px;">
    <img id="logo" src="/index/img/logo.png" alt="logo" />
    <form id="login-wrap" action="">
        <h1>登录</h1>
        <div class="item">
            <span>输入手机号</span>
            <input maxlength="11" name="phone" type="text">
        </div>
        <div class="item">
            <span>输入验证码</span>
            <input name="verify-code" type="text" />
        </div>
        <div class="item">
            <span>输入企业编码</span>
            <input maxlength="6" name="comp-code" type="text">
        </div>
        <a class="btn-getCode fr" href="javascript:void(0)">点击获取验证码</a>
        <div id="sub-login">登录</div>

    </form>
</div>
<script type="text/javascript" src="/index/js/jquery.min.js"></script>
<script type="text/javascript" src="/index/js/layui-master/src/layui.js"></script>
<script type="text/javascript" src="/index/js/jrrpc.js"></script>
<script type="text/javascript" src="/index/js/header.js"></script>

<script>
    layui.use(['layer'], function() {
        var layer = layui.layer; //获得layer模块
        //获取验证码,
        var url1 = '/Login/code';
        var btnGetCode = $('.btn-getCode');
        btnGetCode.on('click',function(){
            if(btnGetCode.hasClass('disable')){
                return false;
            }
            var param = {
                phone:$('input[name=phone]').val()
            };
            $.post(url1, param, function(data) {
                data = $.parseJSON(data);
                if(data.code!=200){
                    layer.msg(data.data.message, {icon: 2,anim: 6,time:2*1000});
                }else {
                    btnGetCode.addClass('disable');
                    var time_wait = 60;
                    function countDown(){
                        if(time_wait==0){
                            btnGetCode.removeClass('disable');
                            btnGetCode.html('点击获取验证码');
                            return false;
                        }
                        btnGetCode.html((time_wait--)+'s后重新获取');
                        setTimeout(function(){
                            countDown();
                        },1000);
                    }
                    countDown();
                }
            });
        });

        //登录
        var btn_login = $('#sub-login'),el_input = $('input');
        var url2 = '/Login/signIn';
        function logIn(){

            var param = {
                firm:$('input[name=comp-code]').val(),
                phone:$('input[name=phone]').val(),
                code:$('input[name=verify-code]').val()
            };
            $.post(url2, param,function(data) {
                data = $.parseJSON(data);
                if(data.code!=200){
                    layer.msg(data.data.message, {icon: 2,anim: 6,time:2*1000});
                    btn_login.removeClass('disabled');
                    btn_login.html('登录');
                }else {
                    location.reload();
                }
            });
        }
        function callLogIn(){
            if(btn_login.hasClass('disabled')){
                return false;
            }else {
                btn_login.addClass('disabled');
                btn_login.html('&nbsp;登录中&nbsp;<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>');
                setTimeout(function(){
                    logIn();
                },1000);
            }
        }
        btn_login.on('click', function(){
            callLogIn();
        });
        el_input.on('keydown',function(event){
            if (event.keyCode == 13)
            {
                callLogIn();
            }
        });
    });


</script>
</body>
</html>






























